// WFFW(Webfront Framework) of W3SDK - w3sdk-1.5.0-beta (http://w3cut.cn Copyright©2019 W3)
//
// csstool - 2019/12/20
// 说明：工具样式
// 用法：w3ui 项目中引用

//
// settings
//

$g-app-type: "pco" !default;

$spacing-enum-count: 20;
$spacing-enum-step: 5;

//
// function
//

// spacing-enum
@mixin spacing-enum($tag, $attr, $unit, $shrink: 1) {
	@for $i from 0 through $spacing-enum-count {
		$val: $i * $spacing-enum-step;

		@if $val <100 {
			$val-tag: $val;
			@if $val <10 {
				$val-tag: "0" + $val;
			}
			$val-val: $val / $shrink;

			$display: block;
			@if $tag == "wh" or $tag == "em" {
				$display: inline-block;
			}
			.#{$tag}#{$val-tag} {
				display: $display;
				#{$attr}: $val-val + $unit;
			}
		}
	}
}

//
// maincode
//

// quick command
.fl {
	float: left;
}
.fr {
	float: right;
}
@mixin cf() {
	&::after {
		content: "";
		display: block;
		clear: both;
	}
}
.cf {
	@include cf();
}
.al {
	text-align: left;
}
.ar {
	text-align: right;
}
.ac {
	text-align: center;
}
.aj {
	text-align: justify;
}
.lc {
	text-transform: lowercase;
}
.uc {
	text-transform: uppercase;
}
@mixin pa-tl {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
}
.pa-tl {
	@include pa-tl;
}
@mixin pa-tr {
	position: absolute;
	z-index: 1;
	top: 0;
	right: 0;
}
.pa-tr {
	@include pa-tr;
}
@mixin pa-br {
	position: absolute;
	z-index: 1;
	bottom: 0;
	right: 0;
}
.pa-br {
	@include pa-br;
}
@mixin pa-bl {
	position: absolute;
	z-index: 1;
	bottom: 0;
	left: 0;
}
.pa-bl {
	@include pa-bl;
}
.elli {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.ofvi {
	overflow: visible !important;
}

// spacing
@if $g-app-type == "pco" or $g-app-type == "pcs" {
	@include spacing-enum("ht", "height", px);
	@include spacing-enum("wh", "width", px);
} @else if($g-app-type == "wap") {
	@include spacing-enum("ht", "height", rpx, 1);
	@include spacing-enum("wh", "width", rpx, 1);
}
@include spacing-enum("em", "width", em, 10);

// "no" tags
.nobg {
	background: none !important;
}
.nobt {
	border-top: none !important;
}
.nobr {
	border-right: none !important;
}
.nobb {
	border-bottom: none !important;
}
.nobl {
	border-left: none !important;
}
.nobd {
	border: none !important;
}
.nopt {
	padding-top: 0 !important;
}
.nopr {
	padding-right: 0 !important;
}
.nopb {
	padding-bottom: 0 !important;
}
.nopl {
	padding-left: 0 !important;
}
.nopd {
	padding: 0 !important;
}
.nomt {
	margin-top: 0 !important;
}
.nomr {
	margin-right: 0 !important;
}
.nomb {
	margin-bottom: 0 !important;
}
.noml {
	margin-left: 0 !important;
}
.nomg {
	margin: 0 !important;
}
